<template>
	<el-dialog :visible="dialogShow" width="100%" append-to-body custom-class="house-info__dialog" :show-close="false"
	 fullscreen>
		<div slot="title" class="dialog-title" style="background-color: #FFFFFF;height: 230px;">
			
			<div class="dialog-title__top" style="position: relative;">
				<img src="@/assets/images/Roomtitle.png" />
				<div class="" style="position: absolute;top: 30px;left:30px;">
					<img src="../../../assets/images/zuojiantou.png" />
					<span style="color: #fff;font-size: 25px;margin-left: 20px;font-weight: bold;margin-top: 30px;">房间入住人员看板</span>
				</div>
				<!-- <h5>房间与入住人员信息</h5>
				<i class="el-icon-close" @click="dialogShow = false"></i> -->
			</div>
			<div class="dialog-title__bottom">
				<!-- <div class="dialog-title__bottom-name">{{params.houseName}}<span v-if="params.isXs == 1">（已消杀：{{params.xssj}}）</span></div> -->
				<h5 class="dialog-title__bottom-name">{{params.houseName}}&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: 100;color: #60656B;font-size: 15px;">罗湖区
						&nbsp;&nbsp;&nbsp;&nbsp;负责人:陈玉华</span></h5>
				<div style="margin-top: 20px;line-height: 40px;font-size: 17px;">
					<!-- <el-row slot="description" class="steps-item"> -->
					<el-col :span="6" class="steps-item__col">
						<el-row>
							<el-col :span="7" class="steps-item__name"><img src="../../../assets/images/fjzs.png">&nbsp;&nbsp;房间总数</el-col>
							<el-col :span="10" class="steps-item__value">{{numList.roomTotal}}间</el-col>
						</el-row>
					</el-col>
					<el-col :span="6" class="steps-item__col">
						<el-row>
							<el-col :span="7" class="steps-item__name"><img src="../../../assets/images/gzry.png">&nbsp;&nbsp;工作人员房间</el-col>
							<el-col :span="10" class="steps-item__value">{{numList.workRoomNum}}间</el-col>
						</el-row>
					</el-col>
					<el-col :span="6" class="steps-item__col">
						<el-row>
							<el-col :span="7" class="steps-item__name"><img src="../../../assets/images/yrz.png">&nbsp;&nbsp;已入住</el-col>
							<el-col :span="10" class="steps-item__value">{{numList.yrzRoomNum}}间</el-col>
						</el-row>
					</el-col>
					<el-col :span="6" class="steps-item__col">
						<el-row>
							<el-col :span="7" class="steps-item__name"><img src="../../../assets/images/zdgz.png">&nbsp;&nbsp;重点关注房间</el-col>
							<el-col :span="10" class="steps-item__value">{{numList.zdgzRoomNum}}间</el-col>
						</el-row>
					</el-col>
					<el-col :span="6" class="steps-item__col">
						<el-row>
							<el-col :span="7" class="steps-item__name"><img src="../../../assets/images/glry.png">&nbsp;&nbsp;隔离人员房间</el-col>
							<el-col :span="10" class="steps-item__value">{{numList.isocialRoomNum}}间</el-col>
						</el-row>
					</el-col>
					<el-col :span="6" class="steps-item__col">
						<el-row>
							<el-col :span="7" class="steps-item__name"><img src="../../../assets/images/wrz.png">&nbsp;&nbsp;未入住</el-col>
							<el-col :span="10" class="steps-item__value">{{numList.wrzRoomNum}}间</el-col>
						</el-row>
					</el-col>
					<el-col :span="6" class="steps-item__col">
						<el-row>
							<el-col :span="7" class="steps-item__name"><img src="../../../assets/images/qz.png">&nbsp;&nbsp;确诊病例房间</el-col>
							<el-col :span="10" class="steps-item__value">{{numList.qzblRoomNum}}间</el-col>
						</el-row>
					</el-col>
					</el-row>
				</div>
				
				<!-- <div class="dialog-title__bootom-tab">
					<div class="bottom-tab__item" v-for="(item,index) in maplist" :class="tabIndex == index && 'active'" @click="tabClick(item,index)">{{maplist[index].name}}</div>
										<div class="bottom-tab__item" :class="tabIndex == 1 && 'active'" @click="tabClick(1)">张淼淼</div>
					<div class="bottom-tab__item" :class="tabIndex == 2 && 'active'" @click="tabClick(2)">鹿实</div>
				</div> -->
			</div>
			
		</div>
		<div class="dialog-title__bottom-name-jiud">{{params.houseName}}<span v-if="params.isXs == 1">（已消杀：{{params.xssj}}）</span></div>
		<div class="dialog-title__bootom-tab">
			<div class="bottom-tab__item" v-for="(item,index) in maplist" :class="tabIndex == index && 'active'" @click="tabClick(item,index)">{{maplist[index].name}}</div>
			
		</div>
		<el-steps direction="vertical" :active="active" v-if="renyuan && renyuan.transprtVo">
			<el-step>
				<div slot="icon" class="steps-icon">
					<div class="steps-icon__name">转运</div>
				</div>
				<el-row slot="description" class="steps-item">
					<el-col :span="5" class="steps-item__col">
						<el-row>
							<el-col :span="8" class="steps-item__name">时间</el-col>
							<el-col :span="16" class="steps-item__value">
								{{renyuan && renyuan.transprtVo.time}}
							</el-col>
						</el-row>
					</el-col>

				</el-row>
			</el-step>
			<el-step>
				<div slot="icon" class="steps-icon">
					<div class="steps-icon__name">入住</div>
				</div>
				<el-row slot="description" class="steps-item">
					<el-col :span="8" class="steps-item__col">
						<el-row>
							<el-col :span="5" class="steps-item__name">人员类型：</el-col>
							<el-col :span="15" class="steps-item__value">
							<!-- {{renyuan.isolateVo.personType}} -->
							{{awsv('person_classify',renyuan.isolateVo.personType)}}
							</el-col>
						</el-row>
					</el-col>

					<el-col :span="8" class="steps-item__col">
						<el-row>
							<el-col :span="5" class="steps-item__name">基础疾病：</el-col>
							<el-col :span="15" class="steps-item__value">
							<!-- {{renyuan.isolateVo.diseases}} -->
							{{renyuan.classify.length > 0 ? '是' :'否'}}
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="8" class="steps-item__col">
						<el-row>
							<el-col :span="5" class="steps-item__name">心理疾病：</el-col>
							<el-col :span="14" class="steps-item__value">
							<!-- {{renyuan.isolateVo.mentalIllness}} -->
							{{ renyuan.isolateVo.assessmentRiskLevel != '0'? '是'  :'无'}}
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="8" class="steps-item__col">
						<el-row>
							<el-col :span="5" class="steps-item__name">入住时间：</el-col>
							<el-col :span="10" class="steps-item__value">{{renyuan.isolateVo.moveDate}}</el-col>
						</el-row>
					</el-col>
					<el-col :span="8" class="steps-item__col">
						<el-row>
							<el-col :span="5" class="steps-item__name">人员：</el-col>
							<el-col :span="15" class="steps-item__value">
							<!-- {{tableData.creapers}} -->
							renyuan.isolateVo.creapers
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="8" class="steps-item__col">
						<el-row>
							<el-col :span="5" class="steps-item__name"></el-col>
							<el-col :span="15" class="steps-item__value"></el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-step>
			<el-step>
				<div slot="icon" class="steps-icon">
					<div class="steps-icon__name">隔离</div>
				</div>
				<div slot="description" class="steps-item">
					<el-table :data="tableData" style="width: 100%">
						<el-table-column prop="creatime" label="时间">
						</el-table-column>
						<el-table-column prop="creapers" label="人员">
						</el-table-column>
						<el-table-column prop="yjzz" label="十大症状">
							<template slot-scope='hcop'>
								{{tabas(hcop)}}
							</template>
						</el-table-column>
						<el-table-column prop="tw" label="体温">
						</el-table-column>
						<el-table-column prop="hsjg" label="核酸">
							<template slot-scope="scope">
								<span v-if="scope.row.hsjg == 1" class="text-green">已核酸采样</span>
								<span v-else class="text-red">未核酸采样</span>
							</template>
						</el-table-column>
					</el-table>
					<div class="steps-item__pagination">
						<div>共{{total}}条</div>
						<el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @size-change="handleSizeChange"
						 @current-change="handleCurrentChange">
						</el-pagination>
					</div>

				</div>

			</el-step>
			<el-step>
				<div slot="icon" class="steps-icon">
					<div class="steps-icon__name">离点</div>
				</div>
				<el-row slot="description" class="steps-item">
					<el-col :span="8" class="steps-item__col">
						<el-row>
							<el-col :span="12" class="steps-item__name">离点时间</el-col>
							<el-col :span="12" class="steps-item__value">{{renyuan.leaveInfoVo.leaveTime}}</el-col>
						</el-row>
					</el-col>
					<el-col :span="8" class="steps-item__col">
						<el-row>
							<el-col :span="12" class="steps-item__name">人员</el-col>
							<el-col :span="12" class="steps-item__value">{{tableData.creapers}}</el-col>
						</el-row>
					</el-col>
					<el-col :span="8" class="steps-item__col">
						<el-row>
							<el-col :span="12" class="steps-item__name">离点类型</el-col>
							<el-col :span="12" class="steps-item__value">{{renyuan.leaveInfoVo.leaveType}}</el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-step>
			<el-step>
				<div slot="icon" class="steps-icon">
					<div class="steps-icon__name">社区管理</div>
				</div>
				<el-row slot="description" class="steps-item">
					<el-col :span="8" class="steps-item__col">
						<el-row>
							<el-col :span="12" class="steps-item__name">接收时间</el-col>
							<el-col :span="12" class="steps-item__value"></el-col>
						</el-row>
					</el-col>
					<el-col :span="8" class="steps-item__col">
						<el-row>
							<el-col :span="12" class="steps-item__name">接收人</el-col>
							<el-col :span="12" class="steps-item__value"></el-col>
						</el-row>
					</el-col>
					<el-col :span="8" class="steps-item__col">
						<el-row>
							<el-col :span="12" class="steps-item__name"></el-col>
							<el-col :span="12" class="steps-item__value"></el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-step>
		</el-steps>
	</el-dialog>
</template>

<script>
	import {
		getPopUp,
		getPopUpNews,
		getPopUpFenY,
		getPopXin
	} from '@/views/yq-hotel/api/roomKanban.js'
	import { getDict } from "@/utils";
	// import axios from "@/plugins/axios";
	export default {
		data() {
			return {
				active:0,
				// tab索引
				tabIndex: 0,
				// 表格每页显示多少条
				pageSize: 3,
				// 当前弹框是否显示
				dialogShow: true,
				// 表格数据
				params: {},
				
				maplist: [],
				
				renyuan: {},
				tableData: [],
				form:{
					current:1,
					size:3,
				},
				houseId:"",
				personId:"",
				numList: {},
				counent:true
			}
		},
		mounted() {
			// this.getPopUpNews()
			this.getPopUp()
			this.getPopUpNews()
			this.getPopXin()
		},

		methods: {
			// dialgfunc(val){
			// 		  this.houseId = val.houseId
			// 		  // this.dialogShow = true
					  
			// 		  // 获取当前人员
			// 		  this.getPopUpNews()
			// 		  this.tabIndex = 0
			// },
			getPopUp(){
					  getPopUp(this.houseId)
					  .then(res => {
					  	console.log(res)
					  	this.params = res.data.data; 
					  	console.log(this.params)
					  })
					  .finally(() => {
					  
					  })
			},
			tabas(tab) {
					let rows = tab.row.yjzz;
					const arr = rows.split(',')
					if(arr.length === 0) return
					let szsy = getDict('symptoms')
					let str = ""
					for(let k=0;k<arr.length;k++){
						for(let i=0;i<=szsy.length-1;i++){
						if(arr[k] == szsy[i].value){
							console.log(szsy[i].label)
							str += szsy[i].label + ','
						}
					}
					}
					return str.slice(0,str.length-1)
			},
			awsv(name_type,type) {
					  if(!type) return
					let szsy = getDict(name_type)
					console.log(szsy)
					for(let i=0;i<=szsy.length;i++){
						if(type == szsy[i].value){
							return szsy[i].label
						}
					}
					return ""
			},
			// 获取人员列表
			getPopUpNews(){
				getPopUpNews({houseId:this.houseId})
				.then(res => {
					console.log(res.data)
					if(res.data.data.length > 0){
						this.personId = res.data.data[0].personId
						 
						console.log(this.personId)
						// 获取房间人员
						this.getPopUpFenY()
						this.getPopUp()
					}
					 this.maplist = res.data.data; 
					 
					 this.tabClick(this.maplist[0],0)
					// console.log(res.data)
					
					//
					// this.tabClick(this.maplist[0])
					// this.tabIndex = 0
					
					
						
					// console.log(this.tableData)
					// console.log(this.personId)
				})
				.finally(() => {
				
				})
			},
			getPopUpFenY(){
				getPopUpFenY({personId:this.personId,...this.form}).then(res => {
					this.$nextTick(() =>{
						this.tableData = res.data.data.records;
						this.total = res.data.data.total;
					})
						
						this.$forceUpdate()
					console.log(this.tableData )
				}).finally(() => {
				
				})
			},
			
			getPopXin() {
				getPopXin(this.houseId)
				.then(res => {
					// this.$setTimeout(function()
					// {
						this.numList = res.data.data
						console.log('111',this.numList)
					// },1000)
					
				})
				.finally(() => {
					
				})
			},
			// 切换tab
			tabClick(item,index) {
				this.tabIndex = index;
				this.renyuan = item
				
				this.personId = item.personId
				 
				console.log(this.personId)
				// 获取房间人员
				this.getPopUpFenY()
				this.getPopUp()
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.form.current = val
				this.getPopUpFenY()
				console.log(`当前页: ${val}`);
			},
		}
	}
</script>

<style lang="scss">
	.house-info__dialog {
		background: #F0F2F5 !important;

		.el-dialog__header {
			padding: 0;
		}
	}

	.dialog-title {
		background: #fff;
	}

	.el-dialog__body {
		padding: 20px 40px !important;
	}

	.el-steps--vertical {
		margin-left: 76px;
	}

	.el-table th {
		padding: 0 !important;
		color: #000;
		font-weight: normal;
		font-size: 15px;
	}

	.el-table .cell {
		color: #000;
		font-weight: normal;
		font-size: 15px;
	}

	.el-step__line {
		background: #4E9DFD !important;
	}

	.el-pagination {
		padding: 12px 5px 0 !important;
	}

	.el-step__icon {
		background: transparent !important;
		border: none !important;
	}

	.el-step__head {
		padding-top: 20px;
	}

	.el-step__line {
		top: 30px !important;
		bottom: -30px !important;
	}
</style>
<style lang="scss" scoped>
	.house-info__dialog {
		.dialog-title__top {
			display: flex;
			justify-content: space-between;
			// padding: 20px 40px;
			// border-bottom: 1px solid #E8E8E8;

			>h5 {
				font-size: 20px;
			}

			.el-icon-close {
				font-size: 26px;
				cursor: pointer;
				font-weight: bold;
			}
		}

		.dialog-title__bottom {
			padding: 15px 40px 0;

			.dialog-title__bottom-name {
				// width: 1134px;
				// height: 40px;
				// line-height: 40px;
				// padding-left: 20px;
				// background: linear-gradient(90deg, #4D9CFD 0%, #7662D5 100%);
				// border-radius: 6px;
				// color: #fff;
				// font-size: 20px;
				color: #333333;
				font-size: 20px;
			}

			
		}
		.dialog-title__bootom-tab {
			display: flex;
		
			.bottom-tab__item {
				height: 50px;
				margin-right: 50px;
				font-size: 16px;
				line-height: 50px;
				position: relative;
				cursor: pointer;
				color: rgba($color: #000000, $alpha: .65);
				color: #333333;
				font-size: 20px;
		
				&.active {
					color: #4E9DFD;
		
					&::before {
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						content: "";
						width: 100%;
						height: 4px;
						background: #4E9DFD;
					}
				}
			}
		}
		
		.dialog-title__bottom-name-jiud {
			width: 2170px;
			height: 40px;
			// background-color: #61C39D;
			font-size: 17px;
			color: #61C39D;
			line-height: 40px;
			background-color:rgba(97, 195, 157, 0.3);
			border: 1px #61C39D solid;
			border-radius: 10px;
			text-indent: 15px;
			// background: red;
		}
		.steps-icon {
			width: 10px;
			height: 10px;
			border-radius: 5px;
			background: #4E9DFD;
			border: 3px solid #F0F2F5;
			position: relative;

			.steps-icon__name {
				position: absolute;
				left: -82px;
				color: #000;
				font-size: 16px;
				top: 50%;
				transform: translateY(-50%);
				width: 72px;
				text-align: right;
				font-weight: 500;
			}
		}

		.steps-item {
			width: 2063px;
			padding: 0 20px;
			background: #fff;
			box-shadow: 0px 1px 4px 0px rgba(6, 23, 48, 0.11);
			border-radius: 6px;
			font-size: 18px;
			color: #000000;
			margin: 0 0 24px 0 !important;
			line-height: 50px;

			.steps-item__col {
				padding-right: 86px;
			}

			.steps-item__name {
				color: rgba($color: #000000, $alpha: .65);
			}

			.steps-item__value {
				// text-align: end;
			}

			.steps-item__pagination {
				display: flex;
				justify-content: flex-end;
			}

			.text-green {
				color: #00EA9C;
			}

			.text-red {
				color: red;
			}
		}
	}
</style>
